<template>
	<view :style="{'height':navHeightotal+'px'}">
	  <view class='nav-bar-wrap'  :style="{'padding-top':status+'px','background':bgColor}">
	    <view class='nav-bar' :style="{'height':navHeight+'px'}">
			<view class="go_ai"></view>
			<view class="flex search">
				<u-search placeholder="请输入关键词" v-model="keyword" :showAction="false" bgColor="#fff" height="32"></u-search>
			</view>			
			<image src="../../static/resource/home/message.png" mode="aspectFit" class="message ml-20"></image> 
	    </view>
	  </view>
	</view>
</template>
 
<script>
	export default {
		name: "navbar",
		props: {
			background: {
			      type: String,
			      value: 'rgba(255, 255, 255, 1)'
			    },
			    type: {
			      type: String,
			      value: 'light'
			    },
			    btnColors: {
			      type: String,
			      value: 'rgba(255, 255, 255, 1)'
			    },
			    textColor: {
			      type: String,
			      value: 'rgba(0, 0, 0, 1)'
			    },
			    title: {
			      type: String,
			      value: ''
			    },
			    visible: {
			      type: Boolean,
			      value: true
			    },
			    left: {
			      type: String,
			      value: ''
			    },
				bgColor:{
					type: String,
					value: 'rgba(180, 212, 245, 1)'
				}
		},
		data() {
			return {
				...getApp().globalData.config,
				statusBarHeight: 40,
				navHeight: 44,
				barWidth: null,
				navHeightotal:100,
				status:44,
				
			};
		},
		created() {
			
			//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
			let {statusBarHeight,system} = uni.getSystemInfoSync()
			// #ifdef APP-PLUS
			this.statusBarHeight = statusBarHeight
			// #endif
			// #ifdef H5
			this.statusBarHeight = statusBarHeight
			// #endif
			this.navHeightotal = statusBarHeight + (system.indexOf('iOS') > -1 ? 44 : 48)
			this.status=statusBarHeight;
			this.navHeight=(system.indexOf('iOS') > -1 ? 44 : 48)
		},
		methods: {
			search() {
				this.$emit('search')
			}
		}
	}
</script>
 
<style lang="scss">
	.nav-bar-wrap {
	  width: 100%;
	  position: fixed;
	  top: 0;
	  left: 0;
	  // background: #fff;
	  z-index: 999;
	}
	
	.nav-bar {
	  font-size: 34rpx;
	  letter-spacing: 2rpx;
	  position: relative;
	  display: -webkit-flex;
	  display: flex;
	  align-items: center;
	  -webkit-align-items: center;
	  height: 44px;
	}

	.go_ai{
		width: 64rpx;
		height: 64rpx;
		background-color: gray;
		border-radius: 50%;
		margin-left: 24rpx;
		margin-right: 38rpx;
	}
	.message{
		width: 60rpx;
		height: 60rpx;
	}
	.search{
		width: 340rpx !important;
	}


</style>
